<template>
    <div class="px-13px pt-8px pb-34px bg-#3f3f3f">
        <div class="flex justify-between items-center text-15px font-bold">
            <div>- 发布新公告</div>
            <div class="flex items-center gap-4px" @click="emit('back')">
                <i class="backIcon"></i>
                <span>返回</span>
            </div>
        </div>

        <div class="space-y-20px mt-20px px-11px">
            <div class="form-item">
                <span>游戏名称：</span>
                <div>
                    <!-- <nut-input v-model="gameName" class="select" readonly>
                        <template #right>
                            <triangle-down color="#1c1c1c" size="8px"></triangle-down>
                        </template>
</nut-input> -->
                    <n-select v-model="formData.game_id"></n-select>
                </div>
            </div>
            <div class="form-item">
                <span>公告类型：</span>
                <div>
                    <n-select v-model="formData.type" :columns="[
                        { text: '游戏更新', value: 1 },
                        { text: '限时活动', value: 2 }
                    ]"></n-select>
                </div>
            </div>
            <div class="form-item">
                <span>宣传图：</span>
                <div>
                    <UploadFile v-model:file="formData.cover" accept="image/jpg, image/png, image/gif" :maximize="1024 * 1024">
                        <template #hint>
                            <div class="upload-hint">
                                *此图为横长方形
                                <br>
                                图片档案大小限制为1M的
                                <br>
                                JPG.PNG.GIF
                            </div>
                        </template>
                    </UploadFile>
                </div>
            </div>
            <div class="form-item">
                <span>游戏详情：</span>
                <div>
                    <nut-textarea v-model="formData.content" :rows="10" autosize class="rounded-5px"></nut-textarea>
                </div>
            </div>
        </div>

        <div class="text-center mt-20px">
            <nut-button color="#d961b2" class="!w-250px !h-33px !text-#fff !text-12px font-bold" @click="handleSubmit">
                提交发布
            </nut-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { TriangleDown } from '@nutui/icons-vue'
import { ref } from 'vue'
import NSelect from '@/components/common/NSelect.vue'
import { axiosService } from '@/http/sever'
import { showNotify } from '@nutui/nutui'

const emit = defineEmits(['back'])
const formData = ref({
    // 'id': 1, //添加时候不传
    'game_id': '', //编辑的时候必填，否则不传
    'cover': '', //封面
    'type': 1, //1 游戏更行 2限时活动
    'content': ''
})

const handleSubmit = () => {
    console.log(' formData -->', formData.value)
    axiosService.post('/api/publisher/Bulletin/addAndUpdate', formData.value).then(res => {
        console.log(' res -->', res)
    }).catch(err => {
        showNotify.danger(err.msg)
    })
}
</script>

<style scoped lang="scss">
.backIcon {
    display: inline-block;
    width: 15px;
    height: 15px;
    background: url('../../../../assets/back.png') no-repeat center;
    background-size: contain;
}

.form-item {
    display: flex;
    // align-items: center;

    &>span {
        white-space: nowrap;
        font-size: 14px;
        flex: 1;
        margin-top: 4px;
    }

    &>div {
        width: 250px;
    }

    :deep(.input) {
        height: 38px !important;
        border-radius: 5px;

        .nut-input-inner,
        .nut-input-box {
            height: 100% !important;
        }

        input {
            color: #000;
        }
    }

    :deep(.select) {
        border-radius: 999px;
        height: 30px;
    }

    :deep(.nut-textarea) {
        padding: 10px;

        .nut-textarea__textarea {
            margin: 0 !important;
        }
    }

    .upload-hint {
        position: absolute;
        left: calc(100% + 18px);
        top: 50%;
        transform: translateY(-50%);
        font-size: 9px;
        line-height: 16px;
        color: #c9c9c9;
        width: fit-content;
        white-space: nowrap;
        text-align: center;
    }

    .activeSystem {
        background: #000;
        color: #fff;
    }

    :deep(.nut-checkbox) {
        .nut-checkbox__label {
            color: #fff;
            margin-left: 7px;
            font-size: 12px;
        }
    }
}
</style>
